<template>
	<view class="container bg-white" v-if="info && info.id">		
		<view class="casei_cover" :style="'height: '+imageH+'px'">
			<image class="cover_img" :src="info.image" mode="aspectFit" />
		</view>		
		<view class="box-bg" :style="'background-color: '+(top < imageH ? 'transparent' : '#fff')+';'">
			<uni-nav-bar :border="false" :statusBar="true" :backgroundColor="(top < imageH ? 'transparent' : '#fff')" :title="top > imageH ? '案例详情' : ''">
				<block slot="left">
					<uni-icons type="back" :color="(top < imageH ? '#fff' : '#666')" size="18" @click="goback" />
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="casei_content p-30 fs12">
			
			<view class="casei_title fs15 fw600 m-b20">{{ info.title }}</view>
			
			<view class="casei_labels m-b30" v-if="info.labels.length > 0">
				<view v-for="label in info.labels" class="casei_label">{{ label.title }}</view>
			</view>
			
			<view class="casei_house uni-flex justify-space-between border round-10 p-30 m-b30 text-center">
				<view>
					<view class="text-gray6 m-b10">户型</view>
					<view class="">{{ info.type.title || "" }}</view>
				</view>
				<view>
					<view class="text-gray6 m-b10">面积</view>
					<view class="">{{ info.area || 0 }}㎡</view>
				</view>
				<view>
					<view class="text-gray6 m-b10">地区</view>
					<view class="">{{ info.city.title || "" }}</view>
				</view>
				<view>
					<view class="text-gray6 m-b10">风格</view>
					<view class="">{{ info.style.title || "" }}</view>
				</view>
			</view>
			
			<view class="case_rich">
				<rich-text :selectable="true" :nodes="info.content"></rich-text>
			</view> 
			<view class="fs12 text-gray9 m-t10 m-b30">发布时间：{{ info.create_time }}</view>
			
			<!-- 案例 -->
			<view class="bg-white m-t30" v-if="list && list.length > 0">
				<view class="case_title_text w-100">猜你喜欢</view>
				<view class="case_list">
					<view class="case_item" v-for="item in list" @click="goPage('case',item.id)">
						<view class="case_image round-10 overflow_h bg-grayf5" :style="'height:'+(parseInt(item.image_h / (item.image_w / 165)) )+'px;'">
							<image class="case_img round-10 " :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="case_title fs12 text-gray6"> {{ item.title || "" }} </view>
						<view class="case_style fs10 text-gray9 uni-flex justify-space-between"> 
							<view>{{ item.style.title || "" }} · {{ item.area || 0 }}㎡</view>
							<view>{{ item.city.title || "" }}</view>
						</view>
						<view class="case_labels uni-flex justify-left">
							<view class="case_label m-r10 fs10" v-for="(ll,kk) in item.labels" v-if="kk < 3">{{ ll.title }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<common-footer></common-footer>
			
		</view>		
		
		<view class="case_fixed" v-if="info.vr_url || info.d3_url">
			<view class="case_fixed_btn case_vr" @click="goPage('vr')" v-if="info.vr_url">
				<image src="/static/vr.png" mode="aspectFill" />
			</view>
			<view class="case_fixed_btn case_3d" @click="goPage('3d')" v-if="info.d3_url">
				<image src="/static/3d.png" mode="aspectFill" />
			</view>
		</view>
		
		<view class="pos-bottom bg-white w-100 border-t1">
			<view class=" p-t10 p-b30 p-l30 p-r30 uni-flex justify-space-between">
				<view class="p-l10 p-r30">
					<uni-icons type="phone-filled" color="#333" size="15"></uni-icons>
					<view class="fs10 text-gray3">客服</view>
				</view>
				<view class="bg-gray9f text-white fs12 text-center round-10 btn_gray" @click="goPage('price','')">算算我家报价</view>
			</view>
		</view>
			
	</view>
</template>
<script>
import { getAd, getLabel, getSystemConfig } from "@/api/base.js"
import { cityList, housePrice, caseDetail, caseList } from "@/api/house.js"

import richTextUtil from '@/common/js/richTextUtil.js'
import moment from 'moment'
let that;
export default {
	data() {
		return {
			id: 0,	//案例id
			info: {},
			top: 0,	//滚动条距离顶部高度
			imageH: 0,
			list: [],	//猜你喜欢
			systemPhone: '',	//客户电话
		}
	},
	onLoad(e){
		that = this
		that.id = e.id ? e.id : 0
		if(that.id > 0) {
			that.getDetail()
		}
		that.getCaseList()
		that.getSystemPhone()
	},
	onPageScroll(e) {
		that.top = parseInt(e.scrollTop) - that.imageH - 10 > 0 ? parseInt(that.imageH) + 10 :0
	},
	methods: {
		/**
		 * 获取案例详情
		 */
		getDetail() {
			caseDetail(that.id).then(res => {
				that.info = res.data
				that.info.content = richTextUtil.formatRichText(that.info.content)
				that.getHeight()
			})
		},
		// 计算图片高度
		getHeight(){
			let screenWidth = uni.getSystemInfoSync().screenWidth
			if(that.info.image_w > screenWidth) {
				that.imageH = parseInt(that.info.image_h / (that.info.image_w / screenWidth))
			}else {
				that.imageH = parseInt(screenWidth / that.info.image_w * that.info.image_h)
			}
		},
		// 其它案例
		getCaseList(){		
			let params = {
				page: 1,
				size: 4,
				order: "sort asc",
				condition: {
					state: 1,
					style_code: that.style_code
				}
			};
			caseList(params).then((res)=>{
				that.list = res.data.list
			})
		},
		goback(){
			uni.navigateBack(-1)
		},
		getSystemPhone(){ 
			getSystemConfig({condition:{code: 'phone',state: 1}}).then(res => {
				that.systemPhone = res.data ? res.data[0]['value'] : ''
			})
		},
		goPage(type, content) {
			let url = ""
			if(type == 'case'){				
				uni.redirectTo({
					url: `/pages/case/detail?id=${content}`
				})
				return				
			}
			if(type == 'price') {
				url = `/pages/case/price`
			}else if(type == '3d') {
				url = `/pages/index/design?url=${encodeURIComponent(that.info.d3_url)}`
			}else if(type == 'vr') {
				url = `/pages/index/design?url=${encodeURIComponent(that.info.vr_url)}`				
			}
			uni.navigateTo({
				url: url
			})		
		}
	}
}
</script>
<style>
.casei_cover {
	width: 100%;
	height: auto;
}
.cover_img {
	width: 100%;
	height: 100%;
}
.casei_content {
	border-radius: 20px 20px 0 0;
	background-color: #fff;
	margin-top: -20px;
	position: relative;
	z-index: 2; 
}
.casei_label {
	color: rgba(0, 122, 255, .8);
	background-color: rgba(0, 122, 255, .1);
	padding: 3px 8px;
	border-radius: 20rpx;
	display: inline-block;
	margin-right: 8px;
	font-size: 10px;
}
.case_rich {
	line-height: 22px;
	color: #333;
}
</style>